<!--
  Generated template for the GridPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>栅格系统示例</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>基础等分栅格</p>
  <ion-row>
    <ion-col>
      <div>1</div>
    </ion-col>
    <ion-col>
      <div>2</div>
    </ion-col>
    <ion-col>
      <div>3</div>
    </ion-col>
  </ion-row>
  <p>四等分</p>
  <ion-row>
    <ion-col>
      <div>1</div>
    </ion-col>
    <ion-col>
      <div>2</div>
    </ion-col>
    <ion-col>
      <div>3</div>
    </ion-col>
    <ion-col>
      <div>4</div>
    </ion-col>
  </ion-row>
  <p>十二等分</p>
  <ion-row>
    <ion-col>
      <div>1</div>
    </ion-col>
    <ion-col>
      <div>2</div>
    </ion-col>
    <ion-col>
      <div>3</div>
    </ion-col>
    <ion-col>
      <div>4</div>
    </ion-col>
    <ion-col>
      <div>12</div>
    </ion-col>
    <ion-col>
      <div>5</div>
    </ion-col>
    <ion-col>
      <div>6</div>
    </ion-col>
    <ion-col>
      <div>7</div>
    </ion-col>
    <ion-col>
      <div>8</div>
    </ion-col>
    <ion-col>
      <div>9</div>
    </ion-col>
    <ion-col>
      <div>10</div>
    </ion-col>
    <ion-col>
      <div>11</div>
    </ion-col>
  </ion-row>
  <p>指定宽度</p>
  <ion-grid>
    <ion-row>
      <ion-col >
        <div>1</div>
      </ion-col>
      <ion-col col-6>
        <div>2</div>
      </ion-col>
      <ion-col>
        <div>3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-5>
        <div>1</div>
      </ion-col>
      <ion-col col-1>
        <div>2</div>
      </ion-col>
      <ion-col col-6>
        <div>3</div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p>自动宽度</p>
  <ion-grid>
    <ion-row>
      <ion-col>
        <div>1</div>
      </ion-col>
      <ion-col col-auto>
        <div>2222222222222222222</div>
      </ion-col>
      <ion-col>
        <div>3</div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p>列偏移 offset</p>
  <ion-grid>
    <ion-row>
      <ion-col offset-6>
        <div>1</div>
      </ion-col>
      <ion-col col-6>
        <div>2</div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p>垂直对齐 </p>
  <!--=================align-items-start====================-->
  <ion-grid>
    <ion-row>
      <ion-col>
        <div>1</div>
      </ion-col>
      <ion-col>
        <div>2<br/>22</div>
      </ion-col>
      <ion-col>
        <div>3 <br/>33 <br/>333</div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!--==================align-items-center======================-->
  <ion-grid>
    <ion-row align-items-center>
    <ion-col>
      <div>1</div>
    </ion-col>
    <ion-col>
      <div>2 <br/>22</div>
    </ion-col>
    <ion-col>
      <div>3 <br/>33 <br/>333</div>
    </ion-col>
  </ion-row>
  </ion-grid>
  <!--=======================align-items-end==========================-->
  <ion-grid>
    <ion-row align-items-end>
      <ion-col>
        <div>1</div>
      </ion-col>
      <ion-col>
        <div>2 <br/>22</div>
      </ion-col>
      <ion-col>
        <div>3 <br/>33 <br/>333</div>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>
